<template>
    <view >
        <view class="list">
			<view class="row" data-url="model" @tap="toPage">
			    <text class="key">模式</text>
			    <text class="val">上传/展示</text>
			    <text class="rightIcon">></text>
			</view>
            <view class="row" data-url="maxCount" @tap="toPage">
                <text class="key">数量限制</text>
                <text class="val">默认9张</text>
                <text class="rightIcon">></text>
            </view>
            <view class="row" data-url="overSize" @tap="toPage">
                <text class="key">限制大小</text>
                <text class="val">默认不限制</text>
                <text class="rightIcon">></text>
            </view>
            <view class="row" data-url="columNum" @tap="toPage" >
                <text class="key">列数</text>
                <text class="val">默认3列</text>
                <text class="rightIcon">></text>
            </view>
            <view class="row" data-url="spaceBetween" @tap="toPage">
                <text class="key">间隔</text>
                <text class="val">默认10像素</text>
                <text class="rightIcon">></text>
            </view>
            <view class="row" data-url="autoUpload" @tap="toPage">
                <text class="key">上传模式</text>
                <text class="val">自动/手动</text>
                <text class="rightIcon">></text>
            </view>
            <view class="row" data-url="imgList" @tap="toPage">
                <text class="key">传入图片</text>
                <text class="rightIcon">></text>
            </view>
            <view class="row" data-url="isAsync" @tap="toPage">
                <text class="key">上传类型</text>
                <text class="val">同步/异步</text>
                <text class="rightIcon">></text>
            </view>
            <view class="row" data-url="tapModel" @tap="toPage">
                <text class="key">点击操作</text>
                <text class="val">浏览/替换</text>
                <text class="rightIcon">></text>
            </view>
            <view class="row" data-url="upLoadingMask" @tap="toPage">
                <text class="key">上传遮罩</text>
                <text class="rightIcon">></text>
            </view>
            <view class="row" data-url="imgStyle" @tap="toPage">
                <text class="key">自定义图片样式</text>
                <text class="rightIcon">></text>
            </view>
            <view class="row" data-url="selectBtn" @tap="toPage">
                <text class="key">自定义上传按钮</text>
                <text class="rightIcon">></text>
            </view>
            <view class="row" data-url="delBtn" @tap="toPage">
                <text class="key">自定义删除按钮</text>
                <text class="rightIcon">></text>
            </view>
        </view>
        
    </view>
</template>

<script>
    
    export default {
       
        data() {
            return {
            }
        },
        methods: {
            toPage(e){
                let _url=e.currentTarget.dataset.url;
                console.log(_url);
                uni.navigateTo({
                    url:'../'+_url+'/'+_url
                })
            }
        },
        onLoad() {

        }
    }
</script>

<style lang="scss">
    page,body{
        background-color: #f6f6f6;
    }
    .list{
        display: flex;
        flex-direction: column;
        padding: 30upx;
        .row{
            display: flex;
            align-items: center;
            width: 100%;
            height: 90upx;
            background-color: #FFFFFF;
            border-radius: 10upx;
            margin-bottom: 20upx;
            box-sizing: border-box;
            padding: 0 30upx;
            box-shadow: 0px 0px 10px 0px rgba(35, 24, 21, 0.13);
            .key{
                font-size: 32upx;
                color: #333333;
                flex-grow: 1;
            }
            .val{
                font-size: 24upx;
                color: #999999;
            }
            .rightIcon{
                color: #999999;
                margin-left: 10upx;
                transform: scaleY(1.4);
            }
        }
    }
    .title {
        font-size: 36rpx;
        color: #8f8f94;
        text-align: center;
    }
	
</style>
